const os = require('os')
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const threads = os.cpus.length; //cpu核数

module.exports = {
    //入口
    entry: './src/main.js',
    //输出
    output: {
        // 开发模式没有输出
        path: undefined,
        // path: path.resolve(__dirname, '../dist'), //所有文件的输出目录  绝对路径
        filename: "js/main.js",
        // 自动清空上次打包的内容
        // webpack4需要使用插件
        clean: true,
    },
    //加载器
    module: {
        rules: [
            //加载器的配置
            {
                oneOf: [{
                        test: /\.css$/,
                        use: [
                            'style-loader', //将js中css通过创建style标签添加到html文件中
                            'css-loader', //将css资源编译成commonjs模块添加到js中
                        ],
                    },
                    {
                        test: /\.less$/,
                        use: [
                            'style-loader', //将js中css通过创建style标签添加到html文件中
                            'css-loader', //将css资源编译成commonjs模块添加到js中
                            'less-loader', //将less编译成css
                        ]
                    },
                    {
                        test: /\.scss$/,
                        use: [
                            'style-loader',
                            'css-loader',
                            'sass-loader',
                        ]
                    },
                    {
                        test: /\.(png|jpe?g|gif)$/,
                        type: 'asset', //webpack5把打包图片内置了 以前需要写url-loader好像
                        parser: {
                            dataUrlCondition: {
                                //把小于10k的图片转为base64编码
                                //优点：减少请求数量  缺点：体积会更大
                                maxSize: 10 * 1024,
                            }
                        },
                        generator: {
                            //文件名取10位hash值
                            filename: 'static/images/[hash:10][ext]'
                        }
                    },
                    {
                        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                        type: 'asset/resource', //字体文件不需要转base64 相当于以前的file-loader
                        generator: {
                            filename: 'static/media/[hash:10][ext][query]',
                        }

                    },
                    {
                        test: /.js$/,
                        exclude: /node_modules/, //排除node_modules中的js文件
                        // include:path.resolve(__dirname,"../src"),//只处理src内容
                        use: [{
                            loader: 'thread-loader',
                            options: {
                                works: threads, //开启多线程
                            }
                        }, {
                            loader: 'babel-loader',
                            options: {
                                cacheDirectory: true, //开启babel缓存
                                cacheCompression: false, //关闭缓存文件压缩
                            },
                        }],
                    }
                ],
            },
        ]
    },
    //插件
    plugins: [
        //ESlint检查
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'), //检查内容  只检查src目录下的文件
            exclude: "node_modules", // 默认值
            threads, //开启多线程
        }),
        new HtmlWebpackPlugin({
            //以'public/index.html'文件为基础来解析
            template: path.resolve(__dirname, '../public/index.html')
        }),
    ],
    //开发服务器 会自动监测文件，自动更新 开发模式下，不会输出文件。
    devServer: {
        host: 'localhost', //开发服务器域名
        port: '3000', //启动服务器端口号
        open: true, //自动打开服务器
        hot: true, //热模块替换默认true
    },
    //模式
    mode: 'development',
    devtool: 'cheap-module-source-map',
}